<template>
  <div class="gosear">
    <div class="title">
      <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign" :rules="rules" ref="formLabelAlign">
        <el-form-item label="商品ID" prop="gid">
          <el-input v-model="formLabelAlign.gid"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="gname">
          <el-input v-model="formLabelAlign.gname"></el-input>
        </el-form-item>
        <el-form-item label="商品特价" prop="price">
          <el-input v-model="formLabelAlign.price"></el-input>
        </el-form-item>
        <el-form-item label="商品库存" prop="knum">
          <el-input v-model="formLabelAlign.knum"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" prop="dialogImageUrl">
          <el-upload list-type="picture-card" class="avatar-uploader" limit:1 action="http://localhost:8080" :on-preview="handlePictureCardPreview" :on-change="handleChange" :auto-upload="false" :multiple="false">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="商品分类" prop="cag">
          <el-select v-model="formLabelAlign.cag" placeholder="请选择" class="inp">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品描述" prop="detail">
          <el-input v-model="formLabelAlign.detail"></el-input>
        </el-form-item>
        <button @click.prevent="finish('formLabelAlign')">完成</button>
        <button @click="resetForm('formLabelAlign')">重置</button>

      </el-form>
    </div>
  </div>
</template>

<script>
import { addgoodrecom } from '@/api/index.js'
export default {
  data() {
    return {
      fileList: [],
      labelPosition: 'right',
      dialogImageUrl: '',
      dialogVisible: false,
      cag: 1,
      formLabelAlign: {
        //id
        gid: '',
        //商品名称
        gname: '',
        //商品特价
        price: '',
        //商品库存
        knum: '',
        //商品分类
        cag: 1,
        //商品详情
        detail: ''
      },
      options: [
        { value: 1, label: '图书，影片' },
        { value: 2, label: '家居生活' },
        { value: 3, label: '服饰，箱包' },
        { value: 4, label: '智能产品' },
        { value: 5, label: '美食宝典' }
      ],
      //上传图片
      imageUrl: '',
      rules: {
        gid: [{ required: true, message: '请输入id', trigger: 'blur' }],
        gname: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        price: [{ required: true, message: '请输入特价', trigger: 'blur' }],
        knum: [{ required: true, message: '请输入库存', trigger: 'blur' }],
        cag: [{ required: true, message: '请输入商品分类', trigger: 'blur' }],
        detail: [{ required: true, message: '请输入商品详情', trigger: 'blur' }]
      }
    }
  },
  methods: {
    //完成
    async finish(val) {
      let flag = false
      this.$refs[val].validate(valid => {
        if (valid) {
          this.$refs[val].model.gid = Number(this.$refs[val].model.gid)
          this.$refs[val].model.knum = Number(this.$refs[val].model.knum)
          this.$refs[val].model.price = Number(this.$refs[val].model.price)

          flag = true
        }
      })
      if (!this.fileList.length) {
        flag = false
      }

      if (flag) {
        let formData = new FormData()
        formData.append('gid', this.$refs[val].model.gid)
        formData.append('gname', this.$refs[val].model.gname)
        formData.append('price', this.$refs[val].model.price)
        formData.append('knum', this.$refs[val].model.knum)
        formData.append('types', this.$refs[val].model.cag)
        formData.append('detail', this.$refs[val].model.detail)
        formData.append('good_img', this.fileList[0].raw)
        // console.log('this.fileList[0].raw', this.fileList[0].raw)
        let res = await addgoodrecom(formData)
        if (res.data.code == 200) {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.$router.push('/adminmain/info')
        } else if (res.data.code == 500) {
          this.$message({
            message: 商品已经存在,
            type: 'error'
          })
        }
      }
    },
    // 图片上传 文件状态改变的钩子
    handleChange(file, fileList) {
      if (fileList.length > 1) {
        fileList = fileList.slice(-1)
      }
      this.fileList = fileList
    },
    //文件已上传的钩子
    handlePictureCardPreview(file) {
      console.log(file, 'file')
      // if (!file.url) {
      //   file.url = URL.createObjectURL(file.raw)
      // }

      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped lang="less">
.el-input {
  width: 400px;
}
.gosear {
  width: 100%;

  .title {
    margin: 2% auto;

    width: 650px;
    display: flex;
    flex-direction: column;

    .content {
      display: flex;
      align-items: center;

      margin-top: 20px;

      .inp {
        margin-left: 18px;
      }
      .inpone {
        margin-left: 30px;
      }
    }
  }
  button {
    height: 50px;
    width: 100px;
    margin: 2% 80px;
    background: #323233;
    color: #797992;
  }
}
/deep/ .el-input__inner:focus {
  border-color: #323233;
}
/deep/ .el-select .el-input__inner:focus {
  border-color: #323233;
}
/deep/ .el-select-dropdown__item.selected {
  color: #323233;
}

.el-select-dropdown__item.selected {
  color: #797992;
}
/deep/ .el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
  border-color: #323233;
}
/deep/.el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
  border-color: #323233;
}
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #797992;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-left: 20px;
  height: 150px;
  width: 150px;
  text-align: center;
  line-height: 150px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
